<template>
  <view class="items-center" :class="{ show: show }">
    <div class="left-btn" @click="show = false">
      <image class="left-btn-icon" mode="widthFix" src="https://cos.aitshirt.cn/app-icon/sheji1%20%2811%29.png" />
    </div>

    <div v-for="item in bottomTools" :key="item.key" class="item-center bottom-btn" @click="bindBottomTool(item)">
      <img class="img-item" mode="widthFix" :src="item.icon" />
      <div class="txt-item">{{ item.name }}</div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';
const activeSelectNode = inject('activeSelectNode');
const bottomTools = [
  {
    name: '置于顶层',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2827%29.png',
    key: 'top',
  },
  {
    name: '置于底层',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2818%29.png',
    key: 'bottom',
  },
  {
    name: '上移一层',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%283%29.png',
    key: 'add',
  },
  {
    name: '下移一层',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2828%29.png',
    key: 'subtract',
  },
];

const show = ref(false);

const emit = defineEmits(['bindTool', 'close']);

const bindBottomTool = (item) => {
  let oldIndex = activeSelectNode.value.zIndex;
  if (item.key === 'top') {
    oldIndex = 100;
  } else if (item.key === 'bottom') {
    oldIndex = -100;
  } else if (item.key === 'add') {
    oldIndex = oldIndex + 3;
  } else if (item.key === 'subtract') {
    oldIndex = oldIndex - 3;
  }
  console.log('<><><><><>', oldIndex)
  activeSelectNode.value.zIndex = oldIndex;
  console.log(activeSelectNode.value.zIndex, activeSelectNode.value);
  emit('bindTool', item.key);
};
const open = (tf) => {
  show.value = tf;
};
defineExpose({ open });
</script>

<style scoped lang="scss">
.items-center {
  z-index: 2;
  width: 100%;
  display: flex;
  position: absolute;
  height: 162rpx;
  justify-content: space-between;
  padding: 50rpx 94rpx;
  transition: all 0.3s ease-in-out;
  transform: translateY(100%);
  opacity: 0;
  background: #fff;
  &.show {
    transform: translateY(0);
    opacity: 1;
  }
}
.left-btn {
  position: absolute;
  left: 16rpx;
  .left-btn-icon {
    width: 48rpx;
    height: 60rpx;
  }
}

.item-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8rpx;
  font-size: 22rpx;
  color: #222222;
}

.img-item {
  width: 32rpx;
}

.txt-item {
  margin: 0 8rpx;
  height: 28rpx;
  line-height: 28rpx;
  font-size: 22rpx;
  color: #222222;
}
</style>
